import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";

// import命令是同步引入的
// import Movies from "../pages/movies/Index.vue";
// import Video from "../pages/video/Index.vue";
// import Show from "../pages/show/Index.vue";
// import Mine from "../pages/mine/Index.vue";
// import Detail from "../pages/detail/Index.vue";
// import NotFound from "../pages/NotFound/Index.vue";

// 二级路由
// import Hot from "../pages/movies/hot/Index.vue";
// import Cinema from "../pages/movies/cinema/Index.vue";
// import Wait from "../pages/movies/wait/Index.vue";

// 创建路由实例
const router = createRouter({
  // 用于设置路由模式
  history: createWebHistory(import.meta.env.BASE_URL),
  // history: createWebHashHistory(),
  // 路由表
  // vue默认是排他性路由
  routes: [
    {
      // 重定型
      path: "/",
      redirect: "/movies",
    },
    {
      path: "/movies",
      redirect: "/movies/hot",
      // import函数，可以用来做异步引入，按需加载
      component: () => import("../pages/movies/Index.vue"),
      // children表示下一级路由
      children: [
        {
          path: "/movies/hot",
          component: () => import("../pages/movies/hot/Index.vue"),
        },
        {
          path: "/movies/cinema",
          component: () => import("../pages/movies/cinema/Index.vue"),
        },
        {
          path: "/movies/wait",
          component: () => import("../pages/movies/wait/Index.vue"),
        },
      ],
    },
    {
      path: "/video",
      // 别名
      alias: "/shipin",
      component: () => import("../pages/video/Index.vue"),
    },
    {
      path: "/show",
      name: "show",
      component: () => import("../pages/show/Index.vue"),
    },
    {
      path: "/mine",
      name: "mine",
      // component: Mine,
      component: () => import("../pages/mine/Index.vue"),

      // 命名视图
      // components: {
      //   mine: () => import("../pages/mine/Index.vue"),
      //   mine2: () => import("../pages/mine2/Index.vue"),
      // },
    },
    {
      // /:id表示动态路由
      path: "/detail/:id",
      name: "detail",
      // 表示这个id，我们可以通过组件的props来获取到
      props: true,
      component: () => import("../pages/detail/Index.vue"),
    },
    // 在路由表的最后
    {
      path: "/:pathMatch(.*)*",
      component: () => import("../pages/NotFound/Index.vue"),
    },
  ],
});

// 暴露路由实例
export default router;
